import { defineStore } from 'pinia'
import defaultSettings from '@/config/settings.json'
import { AppState } from './types'

const useAppStore = defineStore('app', {
  state: (): AppState => ({ ...defaultSettings }),

  getters: {
    appCurrentSetting(state: AppState): AppState {
      return { ...state }
    },
    appDevice(state: AppState) {
      return state.device
    },
    getMenuWidth(state: AppState) {
      return state.menuCollapse ? 48 : state.menuWidth
    }
  },
  persist: true,
  actions: {
    updateSettings(partial: Partial<AppState>) {
      this.$patch(partial)
    },
    toggleTheme(dark: boolean) {
      this.theme = dark ? 'dark' : 'light'
      if (dark) {
        document.body.setAttribute('arco-theme', 'dark')
      } else {
        document.body.removeAttribute('arco-theme')
      }
    },
    toggleDevice(device: string) {
      this.device = device
    },
    toggleMenu(value: boolean) {
      this.hideMenu = value
    }
  }
})

export default useAppStore
